<template>
  <section
    class="w-screen h-screen bg-gradient-to-t from-gray-100 to-slate-100"
  >
    <div class="back-area w-full p-4 h-9 text-blue-500" @click="goHome">
      <van-icon name="wap-home-o" />回到主页
    </div>
    <router-view />
  </section>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const goHome = () => {
  router.replace({
    name: 'Home',
  })
}
</script>

<style scoped lang="scss">
.back-area {
  width: 100%;
  height: 32px;
  font-size: 16px;
  box-sizing: border-box;
  padding: 12px;
}
.root-container {
  height: calc(100vh - 60px);
  .title-section {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title-card {
      position: relative;
      box-sizing: border-box;
      padding: 40px 10px;
      width: 80vw;
      height: 20vh;
      margin: 40px 0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.04);
      text-align: center;
      .title-sign {
        font-size: 0.8rem;
      }
      .title {
        color: #333;
        font-size: 20px;
      }
      .title-number {
        width: 60px;
        height: 32px;
        background-color: rgba(0, 0, 0, 0.7);
        font-size: 16px;
        display: grid;
        place-items: center;
        position: absolute;
        left: 0;
        top: 0;
        color: #ffffff;
      }
    }
  }

  .button-group {
    width: 100%;
    // height: 80px;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .radio-button {
      width: 100%;
      height: 60px;
      border-radius: 10px;
      font-size: 20px;
      margin: 20px 0;
      display: grid;
      place-items: center;
      border: 1px solid #000;
      color: #ffffff;
      box-shadow: 0 5px 0 0 #000;
      transition: all 0.15s;

      &:active {
        box-shadow: none;
        transform: translateY(5px);
      }
      &.danger {
        background-color: hsl(349, 63%, 56%);
        &:active {
          background-color: hsl(349, 63%, 66%);
        }
      }

      &.primary {
        background-color: hsl(213, 87%, 59%);

        &:active {
          background-color: hsl(213, 87%, 69%);
        }
      }
    }
  }
}
</style>
